<template>
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
		</view>
		<view class="topcontent  bgfff color303b39 ">
			<view class="justify-start flex-row mb16">
				<!-- <view class="left_icon"></view> -->
				<view class="lineclamp2" style="margin-left: 8rpx;">{{disease.name}}</view>
			</view>
			<view class="greenbox br16">
				<view class=" color303b39" style="" v-html="disease.content">
				</view>
				<!-- <AdvCom :type='3'></AdvCom> -->
				<community :isshort="1"></community>
				<view class="reference_material">
					参考资料：{{ydzsetobj.referenceMaterial}}
				</view>
				<view class="disclaimers">
					<span class="disclaimers_font">免责声明：</span>
					{{ydzsetobj.disclaimers}}
				</view>
			</view>
		</view>
		<!-- <NewslistCom :head="2" :newsList="comnewsList" style="border-radius: 32rpx 32rpx 0 0;"></NewslistCom> -->
		<typenews :type="3" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="comnewsList">
		</typenews>
		<AdvCom :type='2'></AdvCom>
		<typenews :type="2" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="znNewsList">
		</typenews>
		<AboutDrug :drugList="drugList"></AboutDrug>
		<AdvCom :type='4'></AdvCom>
		<NewslistCom :head="1" :newsList="newsList" style="border-radius: 32rpx 32rpx 0 0;"></NewslistCom>
		<!-- 		<uni-pagination title="这是title" show-icon="true" :pageSize="pageSize" :total="total" :current="page"
			@change="changepage"></uni-pagination> -->

		<view class="pagebox">
			<!-- 统一分页器 -->
			<view class="thepager justify-between align-center">
				<view @click="tonewpage(1)" class="pagebtn" :class="page!=1?'havepage':''">
					上一页
				</view>
				<view class="pageNm">
					<span class="nowpage">{{page}}</span> <span style="margin: 0 8rpx;">/</span>{{pages}}
				</view>
				<view @click="tonewpage(2)" class="pagebtn" :class="page<pages?'havepage':''">
					下一页
				</view>
			</view>
		</view>



		<AboutClinical :clinicalList="clinicalList"></AboutClinical>
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import NewslistCom from '../../components/generalcom/newslistcom.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import AboutDrug from '../../components/generalcom/aboutdrug.vue';
	import community from '../../components/generalcom/community.vue'
	import typenews from '../../components/generalcom/typenews.vue';
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import {
		getDiseaseById,
		getDrugList,
		getClinicalList,
		getNewsList,
		getdisNewsList,
		getotherlist,
		getydzSet
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	export default {
		components: {
			FixedFoot,
			NavHeader,
			NewslistCom,
			AdvCom,
			AboutClinical,
			AboutDrug,
			community,
			typenews,
			HotnewsCom
		},
		data() {
			return {
				page: 1,
				pageSize: 6,
				total: 0,
				pages: 0,
				disease: {},
				title: '',
				newsList: [],
				clinicalList: [],
				drugList: [],
				diseaseList: [],
				comnewsList: [],
				userDocument: {},
				zsNewsList: [],
				znNewsList: [],
				ydzsetobj: {}
			}
		},
		onLoad(option) {
			this.getUser(option)
			this.getset()
		},
		methods: {
			// 统一分页器事件
			tonewpage(num) {
				if (num == 1) {
					if (this.page != 1) {
						this.page--
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				} else {
					if (this.page < this.pages) {
						this.page++
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				}
			},

			getUser(option) {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					this.zsSelectNewsList()
					this.znSelectNewsList()
					this.getDiseaseById( 'undefined' != option.id ? option.id : this.userDocument.diseaseId)
				})
			},
			getset() {
				getydzSet().then(res => {
					this.ydzsetobj = res.data
				})
			},
			//疾病知识文章
			zsSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 2,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"state": "1",
					"label": "4",
					"diseaseId": this.userDocument.diseaseId,
				}
				this.apigetdisNewsList(param)
				let sixparam = {
					"pageNum": 1,
					"pageSize": 6,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"state": "1",
					"label": "3",
					"diseaseId": this.userDocument.diseaseId,
				}
				this.apigetdisNewsList(sixparam)
			},
			apigetdisNewsList(param) {
				getdisNewsList(param).then(response => {
					if (response.rows.length) {
						response.rows.forEach(item => {
							this.zsNewsList.push(item)
						})
					}
				})
			},
			znSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"orderByColumn": "create_time",
					"type": "01",
					"isAsc": "desc",
					"state": "1",
					"diseaseId": this.userDocument.diseaseId,
				}
				getotherlist(param).then(response => {
					this.znNewsList = response.rows
				})
			},
			changepage(currentPage, type) { 
				this.page = currentPage;
				this.getNewsList();
				this.topPage();
			},
			topPage() {
				uni.pageScrollTo({
					scrollTop: 0, 
					duration: 30 
				})
			},
			getDiseaseById(id) {
				getDiseaseById(id).then(res => {
					if (200 == res.code) {
						this.disease = res.data
						let dis = {
							"diseaseId": this.disease.id
						}
						this.diseaseList.push(dis);
						this.getComNewsList();
						this.getNewsList();
						this.getDrugList();
						this.getClinicalList();
					}
				})
			},

			getNewsList() {
				let param = {
					"pageNum": this.page,
					"pageSize": this.pageSize,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"state": "1",
					"diseaseId": this.disease.id,
				}
				
				getNewsList(param).then(response => {
					this.newsList = response.rows
					this.total = response.total
					this.pages = Math.ceil(this.total / this.pageSize)
					this.newsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})

				})
			},

			getComNewsList() {
				let param = {
					"pageNum": this.page,
					"pageSize": this.pageSize,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"state": "1",
					"label": "3",
					"diseaseId": this.disease.id,
				}
				//推荐文章
				getNewsList(param).then(response => {
					this.comnewsList = response.rows
					this.comnewsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})
				})
			},

			// 药品列表
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}
				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
					}
				})
			},
			// 临床招募列表
			getClinicalList() {
				let param = {
					"pageNum": 1,
					"pageSize": 6,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .current-index-text {
		color: #00977C !important;
	}

	::v-deep .icon-left:before {
		content: "上一页";
		font-weight: 400;
		font-size: 32rpx;
		color: #303B39;
	}

	::v-deep .uni-pagination__btn {
		background: #FFF;
		width: 400rpx;
	}

	::v-deep .uni-pagination__num {
		flex: 0;
		margin: 0 100rpx !important;
	}

	::v-deep .uni-pagination {
		padding: 14rpx 0 32rpx;
		background: #FFF;
		border-radius: 0 0 32rpx 32rpx;
	}

	// 新分页器
	::v-deep .page-scroll {
		align-items: center;
		height: 60rpx;
	}

	::v-deep .page-con {
		padding-bottom: 24rpx;
		background: #fff;
		border-radius: 0 0 32rpx 32rpx;
	}

	::v-deep .pag-btn {
		font-size: 24rpx !important;
		width: 178rpx !important;
		height: 76rpx !important;
		background: #fff !important;
		border: 1px solid #B8C3C1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
	}

	::v-deep .prev {
		background: #fff !important;
	}

	::v-deep .pag-btn:last-child {
		margin-right: 0rpx;
	}

	::v-deep .active {
		background: #00977C !important;
	}


	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.topcontent {
			padding: 42rpx 24rpx 24rpx;
			border-radius: 0 0 24rpx 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			line-height: 38rpx;

			.left_icon {
				width: 8rpx;
				height: 40rpx;
				background: #00D9B2;
				border-radius: 50px 50px 50px 50px;
				line-height: 40rpx;
			}

			.greenbox {
				color: #293347;
				font-size: 36rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 36rpx;

				// background: #EDFCF9;
				::v-deep h2 {
					color: #00977C;
					font-size: 38rpx;
					font-weight: 800;
					position: relative;
					padding-left: 12rpx;
					margin-bottom: 24rpx;
					line-height: 72rpx;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 18rpx;
						width: 8rpx;
						height: 38rpx;
						background: #00977C;
						border-radius: 8px 8px 8px 8px;
					}
				}

				::v-deep h3 {
					color: #00977C;
					font-size: 38rpx;
					line-height: 72rpx;
					font-weight: 800;
					margin-bottom: 24rpx;
				}

				::v-deep h4 {
					color: #303B39;
					font-size: 38rpx;
					line-height: 72rpx;
					margin-bottom: 24rpx;
					font-weight: 800;
				}

				::v-deep p {
					color: #303B39;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-bottom: 40rpx;
					font-weight: 400;
				}

				.reference_material {
					font-weight: 400;
					font-size: 28rpx;
					color: #303B39;
					line-height: 56rpx;
					margin-top: 32rpx;
					word-break: break-all;
				}

				.disclaimers {
					background: #F0F6F5;
					border-radius: 8rpx;
					padding: 16rpx;
					margin-top: 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #576260;
					line-height: 56rpx;

					.disclaimers_font {
						color: #00D9B2;
					}
				}
			}
		}

		.pagebox {
			background: #fff;
			padding: 32rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			// 统一分页器样式
			.thepager {
				.pagebtn {
					width: 178rpx;
					height: 76rpx;
					border: 1px solid #B8C3C1;
					text-align: center;
					line-height: 76rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #303B39;
					background: #fff;
					border-radius: 24rpx;
				}

				.havepage {
					color: #00D9B2 !important;
					border-color: #00D9B2 !important;
				}

				.pageNm {
					font-weight: 400;
					font-size: 32rpx;
					color: #7E8987;

					.nowpage {
						color: #303B39;

					}
				}

			}
		}
	}
</style>